<template>
    <div class="main-wraper">
        <div class="nav">
            <div class="nav-logo">
                <img src="../assets/images/login/logo.png" alt="logo">
                <span>| 客服热线：025-66780292 </span>
            </div>
            <div class="user-info">
                <div class="dot" @click="openHelpDoc">
                    <a-icon type="question-circle" />
                </div>
                <div class="dot">
                    <a-icon class="nav-icon" type="qq" />
                </div>
                <div class="dot">
                    <a-icon type="wechat" />
                </div>
                <div class="dot">
                    <a-icon type="compass" />
                </div>
                <a-dropdown class="dot">
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                        {{userName}}
                        <a-icon type="down" />
                    </a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a href="javascript:;">个人资料</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:;">充值续费</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:;" @click="logout">退出</a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
                <div class="dot">
                    <a-icon type="switcher" @click="showDrawer" />
                </div>
            </div>
        </div>

        <div class="container">
            <div class="menu" :style="{'width': collapsed ? '82px': '200px'}">
                <a-menu :default-selected-keys="['workbord']" mode="inline" theme="dark" :inline-collapsed="collapsed"
                    @click="handleClick">
                    <template v-for="item in menuList">
                        <a-menu-item v-if="!item.children.length" :key="item.url">
                            <a-icon type="pie-chart" />
                            <span @click="navigate(item)">{{item.name}}</span>
                        </a-menu-item>
                        <a-sub-menu v-if="item.children.length" :key="item.url">
                            <span slot="title" @click="navigate(item)">
                                <a-icon type="appstore" />
                                <span>{{item.name}}</span>
                            </span>
                            <template v-for="secondItem in item.children">
                                <a-menu-item v-if="!secondItem.children.length" :key="secondItem.url">
                                    <span @click="navigate(item)">{{secondItem.name}}</span>
                                </a-menu-item>
                                <a-sub-menu v-if="secondItem.children.length" :key="secondItem.url"
                                    :title="secondItem.name">
                                    <a-menu-item v-for="thirdItem in secondItem.children" :key="thirdItem.url">
                                        <span @click="navigate(item)">
                                            {{thirdItem.name}}
                                        </span>
                                    </a-menu-item>
                                </a-sub-menu>
                            </template>
                        </a-sub-menu>
                    </template>
                </a-menu>
                <a-button type="primary" class="expend-menu" @click="toggleCollapsed">
                    <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
                </a-button>
            </div>
            <div class="content" :style="{'width': collapsed ? 'calc(100% - 82px)' : 'calc(100% - 200px)' }">
                <div class="content-bread">
                    <a-breadcrumb>
                        <a-breadcrumb-item>首页</a-breadcrumb-item>
                    </a-breadcrumb>
                </div>
                <div class="content-wraper">
                    <transition :name="transitionName">
                        <router-view></router-view>
                    </transition>
                </div>
            </div>
        </div>

        <a-drawer title="主题切换" placement="right" :closable="false" :visible="visible"
            :after-visible-change="afterVisibleChange" @close="onClose">
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
        </a-drawer>
    </div>
</template>

<script>
    import menuList from '../utils/menu.js';
    export default {
        data() {
            return {
                collapsed: false,
                menuList: [],
                userName: JSON.parse(localStorage.getItem('userInfo')) && JSON.parse(localStorage.getItem('userInfo')).UserName,
                visible: false,
                transitionName: ''
            };
        },
        watch: {
            $route(from, to) {
                if (this.transitionName) {
                    return;
                }
                if (from.meta.zIndex < to.meta.zIndex) {
                    this.transitionName = 'slide-top';
                } else {
                    this.transitionName = 'slide-bottom';
                }
                immediate: false
            }
        },
        methods: {
            toggleCollapsed() {
                this.collapsed = !this.collapsed;
            },
            logout() {
                this.$router.push({ name: 'login' })
            },
            openHelpDoc() {
                window.open('http://www.bkrwin.com/help/fx/www/index.html');
            },
            navigate(item) {
                // this.$router.push({ path: item.url })
            },
            handleClick(e) {
                // console.log('click ', e);
                this.$router.push({ path: e.keyPath[0] })
            },
            afterVisibleChange(val) {
                // console.log('visible', val);
            },
            showDrawer() {
                this.visible = true;
            },
            onClose() {
                this.visible = false;
            },
        },
        mounted() {
            console.log('test');
            
            // console.log(JSON.parse(localStorage.getItem('userInfo')));
            this.menuList = menuList.menuList;
            this.navigate({ url: 'main' });
        }
    };

</script>

<style lang="less" scoped>
    .main-wraper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: baseline;

        .nav {
            width: 100%;
            height: 50px;
            background-color: rgba(255, 255, 255, 1);
            /* box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.26); */
            padding: 0 20px 0 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;

            .nav-logo {
                img {
                    width: 120px;
                    height: 36px;
                }

                span {
                    margin-left: 20px;
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    text-align: left;
                    font-family: PingFangSC-Regular;
                    vertical-align: middle;
                }
            }

            .user-info {
                display: flex;

                .dot {
                    margin-left: 30px;
                    cursor: pointer;

                    &:hover {
                        color: #1890FF;
                    }
                }
            }
        }


        .container {
            background-color: #F1F2F5;
            width: 100%;
            height: calc(100% - 50px);
            display: flex;

            .menu {
                height: 100%;
                background: #00152A;
                position: relative;
                user-select: none;
                overflow: auto;
            }

            .content {
                height: 100%;
                overflow: hidden;

                .content-bread {
                    padding: 10px 20px;
                    background-color: #ffffff;
                    /* box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.26); */
                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
                    border-top: 1px solid rgba(0, 0, 0, 0.26);
                    position: relative;
                    z-index: 100;
                }

                .content-wraper {
                    overflow: auto;
                    height: calc(100% - 40px);
                    padding: 15px;
                }

            }
        }

        .expend-menu {
            width: 100%;
            position: absolute;
            bottom: 0;
        }
    }
</style>